<template>
  <div class="home">
    <main>
      <van-image
        class="logo"
        src="https://huangshen.oss-cn-beijing.aliyuncs.com/yao-shop/favicon.ico"
      ></van-image>
      <div class="my-info my-card">
        <div v-if="state.login">
          <h2>{{ state.userInfo.docName }}</h2>
          <h5>{{ state.userInfo.docTel }}</h5>
        </div>
        <div v-else @click="gotoLogin">
          <h2>点击登录</h2>
        </div>
        <van-image
          v-if="state.login"
          round
          width="56px"
          height="56px"
          :src="state.userInfo.docImg"
        ></van-image>
      </div>
    </main>
    <div v-if="state.login" class="money">
      <h2>当前收入 <van-icon name="arrow" /></h2>
      <div>
        <div class="use">
          <p>可提现</p>
          <h2>0.00</h2>
        </div>
        <div class="un-use">
          <p>未入账</p>
          <h2>30.00</h2>
        </div>
      </div>
    </div>
    <div class="order my-card">
      <van-grid clickable :border="false">
        <van-grid-item
          icon="https://huangshen.oss-cn-beijing.aliyuncs.com/wen-yi/icon/daizhifu.png"
          text="待支付"
        />
        <van-grid-item
          icon="https://huangshen.oss-cn-beijing.aliyuncs.com/wen-yi/icon/lianxikefu.png"
          text="咨询中"
        />
        <van-grid-item
          :dot="state.login"
          icon="https://huangshen.oss-cn-beijing.aliyuncs.com/wen-yi/icon/daipingjia.png"
          text="待评价"
        />
        <van-grid-item
          icon="https://huangshen.oss-cn-beijing.aliyuncs.com/wen-yi/icon/dingdan.png"
          text="全部"
        />
      </van-grid>
    </div>
    <van-cell-group class="my-card">
      <van-cell title="我的信息" is-link />
      <van-cell title="诊断记录" is-link />
      <van-cell title="服务管理" is-link />
      <van-cell title="评价" is-link />
     
    </van-cell-group>
    <div class="my-card option" v-if="state.login">
         <van-button v-if="state.onLine" @click="state.onLine=false" type="warning" class="warning" size="large"
        >下线</van-button>
           <van-button  v-if="!state.onLine" @click="state.onLine=true" type="success" class="success" size="large"
        >上线</van-button>
       <van-button  type="danger" class="danger" size="large" @click="loginOut"
        >退出</van-button>
    </div>
    <van-tabbar route>
      <van-tabbar-item icon="wap-home-o" to="/index">主页</van-tabbar-item>
      <van-tabbar-item icon="chat-o" to="/messages">消息</van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/home"> 我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
// @ is an alias to /src
import { defineComponent, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { Toast } from "vant";
import { useStore } from "vuex";
export default defineComponent({
  name: "Index",

  created() {
    //session 中取 用户信息
    this.state.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    if (this.state.userInfo) {
      this.state.login = true;
      //环信登录
      this.initWebIM();
    } else {
      this.state.login = false;
    }
  },

  setup() {
    //实例化store
    const store = useStore();
    //实例化路由
    const router = useRouter();

    //下拉刷新 状态
    const state = reactive({
      login: false,
      userInfo: {},
      onLine:true
    });

    // 使用 mutation
    const initWebIM = () => {
      console.log(state.userInfo.docId);
      store.commit("initWebIM", {
        userName: "hx" + state.userInfo.docId,
        passWord: "111111",
      });
    };

    const loginOut = () => {
      localStorage.removeItem("userInfo");
      state.userInfo = {};
      store.commit("closeWebIM");
      location.reload();
    };
    //下拉刷新 回调
    const onRefresh = () => {
      setTimeout(() => {
        Toast("刷新成功");
        state.loading = false;
        state.count++;
      }, 1000);
    };
    //去登录
    const gotoLogin = () => {
      router.push("/login");
    };
    return {
      state,
      onRefresh,
      gotoLogin,
      initWebIM,
      loginOut,
    };
  },
});
</script>


<style lang="less" scoped>
.home {
  text-align: left;
}
.my-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

main {
  position: relative;
  padding: 0 20px;
  padding-top: 100px;
  background: #1989fa;

  border-bottom-left-radius: 150px;
  border-bottom-right-radius: 150px;
}
.my-card {
  background: #fff;
  padding: 20px 30px;
  border-radius: 20px;
  box-shadow: 0 8px 12px #ebedf0;
  margin-bottom: 20px;
}
.my-info h2 {
  margin: 0;
  padding: 0;
  margin-bottom: 5px;
}
.my-info h5 {
  margin: 0;
  padding: 0;
}
.logo {
  position: absolute;
  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);
}
.money {
  background: #1989fa;
  padding: 20px 30px;
  border-radius: 20px;
  color: #fff;
  margin: 0 20px;
  box-shadow: 0 8px 12px #1989fa;
  margin-bottom: 30px;
}
.money > div {
  display: flex;
}
.money > h2 {
  display: flex;
  align-items: center;
}
.money .use {
  flex: 1;
  h2 {
    margin: 0;
    padding: 0;
  }
}
.money .un-use {
  flex: 1;
  h2 {
    margin: 0;
    padding: 0;
  }
}
.option button{
    margin-bottom: 20px;
 
   
}
 .option  .success{
        box-shadow: 0 8px 12px #07c160;
    }
     .option  .warning{
        box-shadow: 0 8px 12px #ff976a;
    }
         .option  .danger{
        box-shadow: 0 8px 12px #ee0a24;
    }
</style>